What is the difference between JavaScript's for...in, for...of ?

for...in vs for...of

1. for...in

可以針對 物件（Object）或 陣列（Array）來使用遍歷物件，但無法用 Map 和 Set 方法

我們建立一個物件，而 prop 是自訂的變數，會把該物件的屬性存在這個變數中，接著讀取下一個屬性，重覆直到沒有屬性為止。透過 for...in，可以把該物件中的所有屬性名稱和屬性值都呼叫出來。

對於每個不同的屬性，語句都會被執行。每次迭代時，分配的是屬性名　　

for (let prop in ['a', 'b', 'c'])
  console.log(prop);            // 0, 1, 2 (array indexes)

for (let prop in 'str')
  console.log(prop);            // 0, 1, 2 (string indexes)

for (let prop in {a: 1, b: 2, c: 3})
  console.log(prop);            // a, b, c (object property names)

for (let prop in new Set(['a', 'b', 'a', 'd']))
  console.log(prop);            // undefined (no enumerable properties)

2.for of

只要部署了Iterator的數據結構都可以使用for ··· of ···完成遍歷操作
關於 Iterables/Iterators 迭代器

for (let val of ['a', 'b', 'c'])
  console.log(val);            // a, b, c (array values)

for (let val of 'str')
  console.log(val);            // s, t, r (string characters)

for (let val of {a: 1, b: 2, c: 3})
  console.log(prop);           // TypeError (not iterable)

for (let val of new Set(['a', 'b', 'a', 'd']))
  console.log(val);            // a, b, d (Set values)

總結來說:for in總是得到 的key或陣列,而for of和forEach一樣,是直接得到值,在迭代物件屬性時，使用 for...in；在迭代陣列時，使用 for...of

參考資料

MDN for...of

js中forEach，for in，for of循環的用法